<template>
  <div class="city">
    <div class="city-wrapper">
      <div class="city-search">
        <i class="fa fa-search"></i>
        <input type="text" v-model="city_values" placeholder="请输入城市名称">
      </div>
      <button @click="goCity(city)">取消</button>
    </div>
    <scroll class="wrapper" ref="scroll" v-if="this.getSimilarCity.length===0">
      <div class="location">
        <location :address="city" @click.native="goCity(city)"></location>
      </div>
      <alphabet @updateCity="goCity" :cityInfo="cityInfo" :keys="keys" ref="scroll_alphabet"></alphabet>
    </scroll>
    <div class="area_keys" v-if="this.getSimilarCity.length===0">
      <ul>
        <li class="index" @click="getIndex(0)">#</li>
        <li v-for="(item,index) in keys" :key="index" @click="getIndex(index+1)">{{ item }}</li>
      </ul>
    </div>
    <div class="search_list" v-else>
      <ul>
        <li @click="goCity(item)" v-for="(item,index) in getSimilarCity" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Location from '@/components/Location/Location'
import Alphabet from '@/components/alphabet/Alphabet'
import Scroll from '@/components/Scroll/Scroll'

export default {
  name: 'MyCity',
  components: {
    Location,
    Alphabet,
    Scroll
  },
  created() {
    this.getCityInfo()
  },
  data() {
    return {
      city_values: '',
      cityInfo: {},
      keys: [],
      allCities: [],
      // 与输入框 输入的城市名称相似的城市
      getSimilarCity: []
    }
  },
  watch: {
    //  侦听输入框中值的变化
    city_values() {
      this.similarCity()
    }
  },
  methods: {
    // 获取城市列表
    getCityInfo() {
      this.$http('/api/posts/cities').then(res => {
        this.cityInfo = res.data
        this.keys = Object.keys(res.data)
        // 移除最后一个 hotcities
        this.keys.pop()
        // 给keys数组进行一个排序
        this.keys.sort()
        this.$nextTick(() => {
          this.$refs.scroll.initScroll()
        })

        this.keys.forEach(keys => {
          this.cityInfo[keys].forEach(city => {
            this.allCities.push(city.name)
          })
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getIndex(index) {
      // 获取相应索引的左侧所有元素
      const areaList = this.$refs.scroll_alphabet.$el.getElementsByClassName('areaList')
      // 获取点击右边侧边栏中字母 对应左边的元素
      const el = areaList[index]
      // 根据字母跳转到相应的字母的城市
      this.$refs.scroll.scroll.scrollToElement(el, 1000)
    },
    goCity(city) {
      this.$router.push({ name: 'address', params: { city: city } })
    },
    // 用于 当输入框输入东西时  把与搜索关键词城市的列表显示出来
    similarCity() {
      if (!this.city_values) {
        this.getSimilarCity = []
      }
      else {
        this.getSimilarCity = this.allCities.filter(city => {
          return city.indexOf(this.city_values) !== -1
        })
      }
    }
  },
  computed: {
    city() {
      return (this.$store.getters.location.addressComponent.city || this.$store.getters.location.addressComponent.province)
    }
  }
}
</script>

<style lang="less" scoped>
.city {
  height: 100%;
  background-color: #fff;
  .wrapper {
    height: calc(100% - 49px);
  }
  .city-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background-color: #fff;
    z-index: 99;
    .city-search {
      display: flex;
      align-items: center;
      position: relative;
      height: 49px;
      i {
        position: absolute;
        top: 18px;
        left: 10px;
      }
      input {
        background-color: #eee;
        outline: none;
        border: none;
        padding: 10px 34px;
        box-sizing: border-box;
        border-radius: 8px;
      }
    }
    button {
      color: #009eef;
      border: none;
      margin-left: 25px;
      background-color: #fff;
      padding: 10px 0;
      font-size: 16px;
    }
  }
  .location {
    padding: 5px 10px;
  }
  .area_keys {
    position: fixed;
    right: 0;
    top: 105px;
    z-index: 10;
    ul {
      li {
        color: #666;
        margin: 5px 0;
      }
    }
  }
  .search_list {
    margin-top: 20px;
    padding: 0 20px;
    ul {
      li {
        padding: 15px 0;
        border-bottom: 1px solid #ccc;
      }
    }
  }
}
</style>
